<!-- 我要下单 -->
<template>
  <div style="padding: 0 16px;">
    <div style="display: flex;align-items: center;">
      <el-tabs v-model="activeName" class="deleteBorder" style="flex: 1;" @tab-click="handleClick">
        <el-tab-pane label="待发布" name="待发布" />
        <el-tab-pane label="发单中" name="发单中" />
        <el-tab-pane label="服务中" name="服务中" />
        <el-tab-pane label="已完成" name="已完成" />
      </el-tabs>
      <el-input v-model="searchText" placeholder="请输入内容" style="max-width: 220px;margin-right: 16px;" />
      <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
      <el-button type="primary" @click.native="publishHandle">发布订单</el-button>
    </div>
    <want_order_table :tableData="list"
       @canselHandle="canselOrderHandle" 
       @detailHandle="detailHandle"
       @viewPriceHandle="viewPriceHandle"
       @refreshList="getList"
       />
       
    <el-dialog
      title="报价列表"
      :visible.sync="showPriceList"
      width="60%"
    >
      <PriceListView :orderId="selectOrderId" @dismissHandle="dismissHandle"/>
    </el-dialog>
    
  </div>
</template>

<script>
import want_order_table from './table.vue'
import Api from "./api.js"
import PriceListView from "./price_list.vue"
import user from '@/store/modules/user'
export default {
  components: {
    want_order_table,
    PriceListView
  },
  data() {
    return {
      showPriceList:false,
      activeName: '待发布',
      name: '我要下单',
      list:[],
      selectOrderId:undefined,
      searchText: ''
    }
  },

  mounted(){
    this.getList();
  },
  methods:{
    handleClick(){
      this.getList();
    },

    async getList(){
      let self = this;
      let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      let res = await Api.netYzOrderGetList({status:this.activeName,orderUserId:userInfo.id, searchText: this.searchText})
      let resdata = res.data;
      let {status,data,msg} = resdata;
      if (status == 200) {
        self.list = data;
      } else {
        this.$message({
          message: msg,
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }

    },
    publishHandle(){
      this.$router.push({name:"order01"});
    },

    /// 查看订单详情
    detailHandle(id) {
      this.$router.push({name:"order02",params:{id,isAdd:false}});
    },

    viewPriceHandle(id) {
      this.selectOrderId = id;
      this.showPriceList = true;
    },

    dismissHandle(){
      this.showPriceList = false;
    },

    /// 取消订单
    async canselOrderHandle(row){
      let self = this;
      let res = await Api.netYzOrderCancel({ ...row });
      let resdata = res.data;
      let {status,data,msg} = resdata;
      if (status == 200) {
        this.$message({
          message: msg || '操作成功',
          type: 'success',
          showClose: true,
          duration: 3000,
        });
        self.getList();
      } else {
        this.$message({
          message: msg,
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    onSearch() {
      this.getList();
    }
  }
}
</script>

<style>
.deleteBorder .el-tabs__nav-wrap::after{
    height: 0;
  }
</style>
